<script setup lang="ts" name="SettingsDrawer">
import { storeToRefs } from 'pinia'
import { useSettingStore } from '@/store/bpmnProcess/settingStore'
const visible = ref(false)

const showDrawer = () => {
  visible.value = true
}
defineExpose({ showDrawer })

const settingStore = useSettingStore()

const { palette, toolbar, panel, panelMode, editor } = storeToRefs(settingStore)

const readonlyChange = (v) => {
  palette.value = toolbar.value = panel.value = editor.value.miniMap = !v
  if (v) {
    editor.value.useLint = !v
  }
}
</script>

<template>
  <el-drawer class="flow-chart-setting-drawer" v-model="visible" direction="rtl" size="480px">
    <template #header>
      <h2>基础配置</h2>
    </template>
    <template #default>
      <el-form label-width="60px">
        <el-form-item label="只读模式">
          <el-switch v-model="editor.readonly" @change="readonlyChange" />
        </el-form-item>
        <el-form-item label="元素栏">
          <el-switch v-model="palette" :disabled="editor.readonly" />
        </el-form-item>
        <el-form-item label="工具栏">
          <el-switch v-model="toolbar" :disabled="editor.readonly" />
        </el-form-item>
        <el-form-item label="属性栏">
          <el-switch v-model="panel" :disabled="editor.readonly" />
          <el-radio-group v-if="panel" v-model="panelMode" :disabled="editor.readonly">
            <el-radio label="default">默认</el-radio>
            <el-radio label="custom">自定义</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="小地图">
          <el-switch v-model="editor.miniMap" :disabled="editor.readonly" />
        </el-form-item>
        <el-form-item label="流程校验">
          <el-switch v-model="editor.useLint" :disabled="editor.readonly" />
        </el-form-item>
        <el-form-item label="流程引擎">
          <el-radio-group v-model="editor.processEngine" :disabled="editor.readonly">
            <el-radio label="camunda">Camunda</el-radio>
            <el-radio label="activiti">Activiti</el-radio>
            <el-radio label="flowable">Flowable</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </template>
  </el-drawer>
</template>

<style lang="scss">
.flow-chart-setting-drawer {

  .el-drawer__header {
    margin: 0;
    padding: 15px var(--el-space);
    border-bottom: 1px solid var(--el-border-color-extra-light);
  }

  .el-drawer__body {
    display: flex;
    flex-direction: column;
    padding: calc(var(--el-space) - 6px) var(--el-space) var(--el-space);
  }
}
</style>
